<template>
  <el-dialog
    :close-on-click-modal="false"
    v-model="dialogVisible"
    :title="`${parameter.title}`"
    :destroy-on-close="true"
    width="580px"
    draggable
    class="publishDialog"
  >
    <el-form class="drawer-multiColumn-form" label-width="100px">
      <el-form-item label="模板下载 :" v-if="parameter.isShowTemp">
        <el-button type="primary" :icon="Download" @click="downloadTemp">
          点击下载
        </el-button>
      </el-form-item>
      <el-form-item label="文件上传 :">
        <el-upload
          action="#"
          class="upload"
          :drag="true"
          :limit="excelLimit"
          :multiple="true"
          :show-file-list="true"
          :http-request="uploadExcel"
          :before-upload="beforeExcelUpload"
          :on-exceed="handleExceed"
          :on-success="excelUploadSuccess"
          :on-error="excelUploadError"
          :accept="parameter.fileType!.join(',')"
        >
          <slot name="empty">
            <el-icon class="el-icon--upload"><upload-filled /></el-icon>
            <div class="el-upload__text">
              将文件拖到此处，或<em>点击上传</em>
            </div>
          </slot>
          <template #tip>
            <slot name="tip">
              <div class="el-upload__tip">
                请上传 .xls , .xlsx 标准格式文件，文件最大为
                {{ parameter.fileSize }}M
              </div>
            </slot>
          </template>
        </el-upload>
      </el-form-item>
      <!-- <el-form-item label="数据覆盖 :">
        <el-switch v-model="isCover" />
      </el-form-item> -->
    </el-form>
  </el-dialog>
</template>

<script setup lang="ts" name="ImportExcel">
import { ref } from "vue";
import { useDownload } from "@/utils/useTable";
import { ElLoading } from "element-plus"; // 引入
import { Download, UploadFilled } from "@element-plus/icons-vue";
import {
  ElNotification,
  UploadRequestOptions,
  UploadRawFile,
} from "element-plus";

export interface ExcelParameterProps {
  title: string; // 标题
  fileSize?: number; // 上传文件的大小
  fileType?: File.ExcelMimeType[]; // 上传文件的类型
  tempApi?: (params: any) => Promise<any>; // 下载模板的Api
  importApi?: (params: any, config: any) => Promise<any>; // 批量导入的Api
  getTableList?: () => void; // 获取表格数据的Api
  isShowTemp?: boolean; // 是否显示模板下载
  fileTypes?: string; // 是否显示模板下载
  searchParam?: any; // 查询参数
}

// 是否覆盖数据
// const isCover = ref(false);
// 最大文件上传数
const excelLimit = ref(1);
// dialog状态
const dialogVisible = ref(false);
// 父组件传过来的参数
const parameter = ref<ExcelParameterProps>({
  title: "",
  fileSize: 5,
  fileType: [
    "application/vnd.ms-excel",
    "application/vnd.openxmlformats-officedocument.spreadsheetml.sheet",
  ],
  isShowTemp: true,
  // 导入模板的格式
  fileTypes: ".xlsx",
  searchParam: {},
});

// 接收父组件参数
const acceptParams = (params: ExcelParameterProps) => {
  parameter.value = { ...parameter.value, ...params };
  dialogVisible.value = true;
};

// Excel 导入模板下载
const downloadTemp = () => {
  if (!parameter.value.tempApi) return;
  useDownload(
    parameter.value.tempApi,
    `${parameter.value.title}模板`,
    parameter.value.searchParam,
    true,
    parameter.value.fileTypes
  );
};

// 文件上传
const uploadExcel = async (param: UploadRequestOptions) => {
  let loadingInstance = ElLoading.service({
    target: ".publishDialog",
    lock: true,
    text: "上传中, 请稍后···",
  });
  console.log("parameter.value.searchParam", parameter.value.searchParam);

  let excelFormData = new FormData();
  excelFormData.append("file", param.file);
  excelFormData.append(
    "workCenterId",
    parameter.value.searchParam.workCenterId
  );

  excelFormData.append("planBatch", parameter.value.searchParam.planBatch);
  excelFormData.append("planWeek", parameter.value.searchParam.planWeek);
  excelFormData.append("plantId", parameter.value.searchParam.plantId);
  excelFormData.append("planYear", parameter.value.searchParam.planYear);
  excelFormData.append(
    "groupType",
    parameter.value.searchParam.groupType == undefined
      ? ""
      : parameter.value.searchParam.groupType
  );
  excelFormData.append(
    "month",
    parameter.value.searchParam.month == undefined
      ? ""
      : parameter.value.searchParam.month
  );
  excelFormData.append(
    "planMonth",
    parameter.value.searchParam.planMonth == undefined
      ? ""
      : parameter.value.searchParam.planMonth
  );
  let config = { headers: { "Content-Type": "multipart/form-data" } };
  // excelFormData.append("isCover", isCover.value as unknown as Blob);
  await parameter.value.importApi!(excelFormData, config).finally(() => {
    console.log(2222);

    loadingInstance.close();
  });
  parameter.value.getTableList && parameter.value.getTableList();
  dialogVisible.value = false;
};

/**
 * @description 文件上传之前判断
 * @param file 上传的文件
 * */
const beforeExcelUpload = (file: UploadRawFile) => {
  const isExcel = parameter.value.fileType!.includes(
    file.type as File.ExcelMimeType
  );
  const fileSize = file.size / 1024 / 1024 < parameter.value.fileSize!;
  if (!isExcel)
    ElNotification({
      title: "温馨提示",
      message: "上传文件只能是 xls / xlsx 格式！",
      type: "warning",
    });
  if (!fileSize)
    setTimeout(() => {
      ElNotification({
        title: "温馨提示",
        message: `上传文件大小不能超过 ${parameter.value.fileSize}MB！`,
        type: "warning",
      });
    }, 0);
  return isExcel && fileSize;
};

// 文件数超出提示
const handleExceed = () => {
  ElNotification({
    title: "温馨提示",
    message: "最多只能上传一个文件！",
    type: "warning",
  });
};

// 上传错误提示
const excelUploadError = (e) => {
  // ElNotification({
  //   title: "温馨提示",
  //   message: `${parameter.value.title}失败，请您重新上传！`,
  //   type: "error",
  // });
};

// 上传成功提示
// const excelUploadSuccess = () => {
//   ElNotification({
//     title: "温馨提示",
//     message: `${parameter.value.title}成功！`,
//     type: "success",
//   });
// };

const resCode = ref(200);
const sucessTatol = ref(0);
// 上传成功提示
const excelUploadSuccess = () => {
  // 导入成功时提示
  console.log("ffff", resCode.value);
  if (resCode.value === 200) {
    ElNotification({
      title: "温馨提示",
      message: `${parameter.value.title}成功${
        sucessTatol.value ? sucessTatol.value + "条" : ""
      }！`,
      type: "success",
    });
  }
  // 导入失败需要查看错误信息时提示
  if (resCode.value === 300) {
    ElNotification({
      title: "温馨提示",
      message: `${parameter.value.title}失败！请查看错误信息后，重新上传`,
      type: "error",
    });
  }
};

defineExpose({
  acceptParams,
  resCode,
  sucessTatol,
});
</script>
<style lang="scss" scoped>
.upload {
  width: 80%;
}
</style>
